<template>
  <div class="page" id="workPage">
    <div class="page__bd">
      <div class="weui-tab">
        <div class="weui-tab__panel">
          <div class="weui-tab__panel_top">
            <i @click="goBack" class="el-icon-arrow-left return-back"></i>
            <div class="top_title">
              <p>{{title}}</p>
            </div>
          </div>
          <div class="weui-tab__panel_bd">
            <template v-if="list.length>0">
              <div class="fileList">
                <van-cell-group>
                  <van-cell v-for="(item,index) in list" :key="index" v-longtap="operateFile" :title="item.name"
                            :label="item.createTime" :icon="baseUrl+ item.icon" border
                            @click="linkTo(item.name,item.data,index)" >
                    <van-icon :data-index="index" class="iconfont" class-prefix="icon" :name="isOperate?(item.isCheck ? 'checked1' : 'circle'):'fanhui'"></van-icon>
                  </van-cell>
                </van-cell-group>
              </div>
            </template>
            <template v-else>
              <div class="null_box">
                <div class="null_icon">
                  <span class="icon iconfont icon-wendang"></span>
                </div>
                <div class="null_title">没有文件</div>
              </div>
            </template>
          </div>
        </div>
      </div>
    </div>
    <div class="layOpen">
      <van-dialog
        v-model="addFolderLayShow"
        title="新建文件夹"
        size="large"
        show-cancel-button
        :before-close="isReName?reNameDiag:operateDiag"

        :confirmButtonColor="confirmButtonColor"
      >
        <van-cell-group>
          <van-field v-model="newFolderName" placeholder="新建文件夹"></van-field>
        </van-cell-group>
      </van-dialog>
    </div>
    <AddDrag v-if="!isOperate" :list="addList" toolGroupHeight="115px" @addFile="addFun"></AddDrag>
    <div class="operateTool" v-if="isOperate">
      <van-tabbar>
        <van-tabbar-item @click="cancleOperate">
          <van-icon class="iconfont" class-prefix="icon" name="guanbi" tag="div"></van-icon>
          <span>取消</span></van-tabbar-item>
        <van-tabbar-item @click="reName">
          <van-icon class="iconfont" class-prefix="icon" name="chongmingming" tag="div"></van-icon>
          <span>重命名</span></van-tabbar-item>
        <van-tabbar-item @click="deleteSelect">
          <van-icon class="iconfont" class-prefix="icon" name="delete2" tag="div"></van-icon>
          <span>删除</span></van-tabbar-item>
        <van-tabbar-item>
          <van-icon class="iconfont" class-prefix="icon" name="filetransfer_px" tag="div"></van-icon>
          <span>移动到</span></van-tabbar-item>
        <van-tabbar-item @click="selectAll">
          <van-icon class="iconfont" class-prefix="icon" name="quanxuan" tag="div"></van-icon>
          <span>全选</span></van-tabbar-item>
      </van-tabbar>
    </div>
  </div>
</template>

<script>
  // @ --> 全局src
  import AddDrag from '@/components/publics/AddDrag'
  import util from '@/assets/util/util'
  import Vue from 'vue'
  export default {
    name: "FileItem"
    , data() {
      return {
        title: '' //当前页标题
        ,addFolderLayShow: false  //弹窗控制
        ,newFolderName: '' //新建文件夹名字
        ,confirmButtonColor: '#eee'
        ,isOperate: false  //文件操作状态
        ,isAllChecked:false //是否全选
        ,isReName:false  //重命名状态
        ,list: [] //文件列表
        ,addList: [
          {
            title: '文件夹',
            imgSrc: '/static/images/document_man/addfolder.png'
          }
          , {
            title: '文件',
            imgSrc: '/static/images/document_man/upload.png'
          }
        ]
        , baseUrl: this.NET.BASE_URL, //文件访问地址头部 http://localhost:8080
      }
    }
    , methods: {
      //返回上一层
      goBack() {
        this.$router.go(-1);
      }
      //添加文件夹 文件
      , addFun(e) {
        if (parseInt(e.srcElement.dataset.index) === 0) {
          // 添加文件夹
          this.addFolderLayShow = true;
        } else {

        }
      }
      //点击跳转
      , linkTo(fileName, fileData,index) {
        //跳转
        if(!this.isOperate){
          this.$router.push('FileItem?title=' + fileName + '&data=' + JSON.stringify(fileData))
        //  文件操作状态选择
        }else{
          //    let newItem = ;
          this.list[index].isCheck = ! this.list[index].isCheck;
          Vue.set(this.list,index,this.list[index]);
        }
      }
      //长按操作
      , operateFile() {
        this.list.forEach((item,index)=>{
          item.isCheck = false;
        });
        this.isOperate = true;
      }
      //新建文件夹弹出层
      , operateDiag(action, done) {
        if (action === 'confirm' && this.newFolderName.length > 0) {
          this.list.unshift({
            fileSize: '0KB',
            name: this.newFolderName,
            createTime: util.getCurrTime().YMDHMin,
            icon: '/static/images/document_man/folder.png',
            fileType: 'folder',
            data: []
          });
          this.newFolderName = '';
        }
        //关闭弹窗
        done();
      }
    //  删除选中
      ,deleteSelect(){
        let selectNum=0;
        this.list.forEach(item=>{
            if(item.isCheck){
              selectNum++;
            }
        });
        if(selectNum<=0){
          this.$toast('请选择文件！');
        }else {
          this.$dialog.confirm({
            title: '确认删除'
            ,message: '您确定要删除选中文件吗？'
            ,confirmButtonColor:'red'
          }).then(() => {
            let obj = {
              delete:()=>{
                this.list.forEach((item,index)=>{
                  if(item.isCheck){
                    this.list.splice(index,1);
                    obj.delete();
                  }else {
                    this.isOperate=false;
                  }
                })
              }
            };
            obj.delete();

          }).catch(()=>{})
        }
      }
      //取消操作
      ,cancleOperate(){
        this.isOperate=false;
        this.isAllChecked=false;
        this.list.forEach(item=>{
          item.isCheck=false;
        })
      }
      //全选
      ,selectAll(){
        this.list.forEach((item,index)=>{
          // let newItem = item;
          // newItem.isCheck = ;
          item.isCheck = !this.isAllChecked;
          Vue.set(this.list,index,item);
        });
        this.isAllChecked = !this.isAllChecked;
      }
    //  重命名
      ,reName(){
        this.isReName=true;
        let selectNum=0;
        let currIndex = null;
        this.list.forEach((item,index)=>{
             if(item.isCheck){
               selectNum++;
               currIndex = index;
             }
        });
        if(selectNum>1){
          this.$toast('选中文件过多！');
        }else if(selectNum<=0){
          this.$toast('请选择文件！');

        }else {
          this.addFolderLayShow=true;
          this.newFolderName = this.list[currIndex].name;
        }
      }
      ,reNameDiag(action,done){
        if(action==='confirm' && this.newFolderName.length>0){
          let currIndex = null;
          this.list.forEach((item,index)=>{
            if(item.isCheck){
              currIndex = index;
            }
          });
          this.list[currIndex].name = this.newFolderName;
          Vue.set(this.list,currIndex,this.list[currIndex]);
        }
        this.newFolderName = '';
        // 清除所有选中
        this.list.forEach((item,index)=>{
              item.isCheck = false;
            Vue.set(this.list,index,item);
        });
        //取消操作状态
        this.isOperate=false;
        done();
        }
    }
    , mounted() {
      //  获取当前页数据
      this.list = JSON.parse(this.$route.query.data);
      this.title = this.$route.query.title;
    }
    , beforeRouteUpdate(to, from, next) {
      this.title = to.query.title;
      this.list = JSON.parse(to.query.data);
      next();
    }
    , watch: {
      //  监听新建文件夹 修改确认按钮颜色
      newFolderName(val, oldVal) {
        if (val.length > 0) {
          this.confirmButtonColor = "#62c9f8"
        } else {
          this.confirmButtonColor = "#eee"
        }
      }
    }
    , components: {AddDrag}
  }
</script>

<style>
  .null_box {
    width: 100vw;
    height: calc(100vh - 44px);
  }

  .null_icon {
    padding-top: 10rem;
    text-align: center;
  }

  .null_icon .icon {
    font-size: 6rem;
    color: #bbb;
  }

  .null_title {
    text-align: center;
    font-size: 1rem;
    color: #bbb;
    letter-spacing: 0.2rem;
  }

  .layOpen .van-dialog__header {
    font-weight: bold;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .layOpen .van-dialog {
    border-radius: 10px;
  }

  .operateTool .icon {
    color: #fff;
    position: relative;
    margin-bottom: 5px;
    font-size: 18px;
  }

  .operateTool .van-tabbar-item--active {
    color: #fff;
  }

  .operateTool .van-tabbar {
    background-color: #62c9f8;
  }

  .operateTool .van-tabbar-item__text {
    text-align: center;
    color: #fff;
  }

  .fileList .van-cell-group {
    padding-bottom: 100px;
    min-height: calc(100vh - 44px);
  }

  .fileList .van-cell__value {
    display: flex;
    flex-direction: row-reverse;
  }

  .fileList .icon {
    align-self: center;
  }
  .fileList .icon-checked1{
    color: #62c9f8;
  }
  .van-dialog{
    border-radius: 10px;
  }
</style>
